<style>
  .upgoods-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      @on-close="cancel"
      :closable="false"
      :title="title"
      width="35%">
      <div style="margin-top: 45px; margin-left: 15%; font-size: 15px;">
        <div>
          <div style="display: inline-block; width: 100px; text-align: right">拼团发起人：</div>
          <div style="display: inline-block; margin-left: 20px;">{{row.uiname ? row.uiname : '-'}}</div>
        </div>
        <div style="margin-top: 30px;">
          <div style="display: inline-block; width: 100px; text-align: right">商品名称：</div>
          <div style="display: inline-block; margin-left: 20px;">{{row.gname ? row.gname : '-'}}</div>
        </div>
        <div style="margin-top: 30px;">
          <table>
            <tr style="height: 30px;">
              <td style="width: 105px; text-align: center">拼团人员</td>
              <td style="width: 120px; text-align: center">电话号码</td>
            </tr>
            <tr style="height: 30px;" v-for="(item, index) in upGoodsInfoList" :key="index">
              <td style="width: 105px; text-align: center">{{item.split(',')[0] ? item.split(',')[0] : '-'}}</td>
              <td style="width: 120px; text-align: center">{{item.split(',')[1] ? item.split(',')[1] : '-'}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="upgoods-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">返回</Button>
        <Button v-show="row.state === 1" type="primary" @click="handleSubmit">确认使用</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'UpgoodsDrawer',
  data () {
    return {
      title: '',
      loading: true
    }
  },
  updated () {
    this.title = '成团详情'
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      modalState: state => state.modal.customerDrawerState,
      row: state => state.upGoods.row,
      upGoodsInfoList: state => state.upGoods.upGoodsInfoList
    })
  },
  methods: {
    ...mapActions(['updateCustomerDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('upgoods-valid')
    },
    cancel () {
      this.updateCustomerDrawerState(false)
    }
  }
}
</script>
